<template>
  <div class="box-wrapper">
    <div class="create-btn" @click="router.push({name: 'customerOutStoreCreate'})">创建出库单</div>
    <div class="search-box">
      <tab :tabList="tabList" @changeTab="changeTab"></tab>
      <queryModel :queryList="queryList" @changeParams="getList"></queryModel>
    </div>
    <tablePage :tableData="tableData" :pageIndex="queryParams.pageIndex" :tableConfig="tableConfig" @changeParams="getList" v-loading="loading">
      <template v-slot:billNo="{row}">
        <el-button type="text" @click="router.push({name: 'customerOuStoretDetail',query: {id: row.id}})">{{row.billNo}}</el-button>
      </template>
      <template v-slot:goodsName="{row}">
        <div class="item-box" v-for="item in row.goodInfos">{{item.goodsName}}</div>
      </template>
      <template v-slot:goodsCount="{row}">
        <div class="item-box" v-for="item in row.goodInfos">{{item.goodsCount}}</div>
      </template>
      <template v-slot:actualOutCount="{row}">
        <div class="item-box" v-for="item in row.goodInfos">{{item.actualOutCount}}</div>
      </template>
      <template v-slot:oper="{row}">
        <el-button type="text" @click="router.push({name: 'customerOutStoreEdit',query: {id: row.id}})">编辑</el-button>
      </template>
    </tablePage>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onActivated } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import tab from '@/components/tab/index.vue'
import queryModel from '@/components/queryModel/index.vue'
import tablePage from '@/components/tablePage/index.vue'
import { getCustomerOutStoreList } from '@/api/customerOutStore'
import { queryGoodsDictionary, queryWarehouseOrCustomer } from '@/api/common'

export default defineComponent({
  name: 'customerInStore',
  components: {
    queryModel,
    tablePage,
    tab
  },
  setup () {
    const router = useRouter()
    const tabList = [{ code: 200, name: '已出库' }, { code: 100, name: '待出库' }, { code: 300, name: '已驳回' }]
    const defaultQueryList = [
      { options: { label: '出库单号', placeholder: '请输入出库单号' }, maxlength: 25, field: 'billNo', type: 'text' },
      { options: { label: '库区', placeholder: '请选择库区' }, optionsKey: 'warehouseList', field: 'wareHouseName', type: 'select', valueKey: 'label' },
      { options: { label: '车牌/船号', placeholder: '请输入车牌/船号' }, maxlength: 10, field: 'plateNumber', type: 'text' },
      { options: { label: '货品', placeholder: '请选择货品' }, optionsKey: 'goodsList', field: 'goodsName', type: 'select', valueKey: 'name', labelKey: 'name' },
      { options: { label: '出库时间', placeholder: ['请选择', '请选择'] }, field: ['outTimeStart', 'outTimeEnd'], type: 'dateRange', showType: [200] },
      { options: { label: '创建时间', placeholder: ['请选择', '请选择'] }, field: ['createTimeStart', 'createTimeEnd'], type: 'dateRange', showType: [100] },
      { options: { label: '驳回时间', placeholder: ['请选择', '请选择'] }, field: ['refuseTimeStart', 'refuseTimeEnd'], type: 'dateRange', showType: [300] }
    ]
    let defaultTableConfig = reactive({
      columnList: [
        { label: '出库单号', slot: 'billNo', minWidth: 200 },
        { label: '库区', prop: 'wareHouseName', minWidth: 160 },
        { label: '车牌/船号', prop: 'plateNumber', minWidth: 150 },
        { label: '货品', slot: 'goodsName', minWidth: 150 },
        { label: '重量（吨）', slot: 'goodsCount', minWidth: 150 },
        { label: '实际出库重量（吨）', slot: 'actualOutCount', minWidth: 150, showType: [200] },
        { label: '创建时间', prop: 'createTime', minWidth: 150, showType: [100, 200] },
        { label: '实际出库时间', prop: 'actualOutTime', minWidth: 150, showType: [200] },
        { label: '预计到库时间', prop: 'estimateOutDate', minWidth: 150, showType: [100, 300] },
        { label: '驳回时间', prop: 'refuseTime', minWidth: 150, showType: [300] },
        { label: '操作', slot: 'oper', minWidth: 150, showType: [300] }
      ],
      total: 0
    })
    let tableData = ref([])
    let loading = ref(false)

    // 获取配置项
    const store = useStore()
    const getConfig = async () => {
      const [goodsRes, warehouseRes] = await Promise.all([queryGoodsDictionary(), queryWarehouseOrCustomer({ userType: 20 })])
      if (goodsRes.code === 200) {
        store.commit('setConfig', { goodsList: goodsRes.result })
      }
      if (warehouseRes.code === 200) {
        store.commit('setConfig', { warehouseList: warehouseRes.result })
      }
    }
    getConfig()

    let queryList = ref()
    let tableConfig = reactive({})
    // 获取列表数据
    let queryParams = reactive({
      pageIndex: 1,
      pageSize: 10,
      billStatus: 200
    })
    const getList = async (params = {}) => {
      loading.value = true
      Object.assign(queryParams, params)
      let data = { ...queryParams }
      if ([100, 300].includes(data.billStatus)) {
        data.outTimeStart = ''
        data.outTimeEnd = ''
      }
      if ([100, 200].includes(data.billStatus)) {
        data.refuseTimeStart = ''
        data.refuseTimeEnd = ''
      }
      if ([200, 300].includes(data.billStatus)) {
        data.createTimeStart = ''
        data.createTimeEnd = ''
      }
      const { code, result, totalRow } = await getCustomerOutStoreList({ ...data, userType: 10 })
      loading.value = false
      if (code !== 200) return
      tableConfig.total = totalRow
      tableData.value = result
    }
    const changeTab = (code) => {
      queryParams.billStatus = code
      queryParams.pageIndex = 1
      queryList.value = defaultQueryList.filter(({ showType }) => !showType || showType.includes(code))
      tableConfig.columnList = defaultTableConfig.columnList.filter(({ showType }) => !showType || showType.includes(code))
      getList()
    }
    onActivated(() => {
      changeTab(queryParams.billStatus)
      getConfig()
    })
    return { queryList, tableConfig, tableData, tabList, queryParams, loading, router, changeTab, getList }
  }
})

</script>

<style scoped lang="less">
  .box-wrapper {
    .create-btn {
      position: absolute;
      top: 10px;
      right: 60px;
      width: 126px;
      height: 44px;
      background: #409EFF;
      border-radius: 8px;
      font-size: 18px;
      color: #ffffff;
      line-height: 44px;
      text-align: center;
      cursor: pointer;
      &:hover {
        background: #66b1ff;
      }
    }
    .search-box {
      padding-top: 25px;
      background: #ffffff;
      margin-bottom: 20px;
      border-radius: 8px;
      .tab-box {
        margin-bottom: 29px;
      }
    }
    .item-box {
      border-bottom: 1px solid #f2f2f2;
      padding: 3px 0;
      &:nth-last-child(1) {
        border: 0;
      }
    }
  }
</style>
